<template>
  <div class="login-body">
    <div class="main-login">
      <div class="title" style="color: #fff">随心旅游管理平台</div>
      <div class="display-box">
        <el-tabs class="title-tabs" :stretch="true" v-model="activeName">
          <el-tab-pane label="账号密码登录" name="password">
            <transition name="fade">
              <div style="position: relative">
                <loginPassWord @submit="passwordLogin" ref="loginPassWord" v-show="activeName== 'password'"></loginPassWord>
                <el-button type="text" style="position: absolute; bottom: 90px; right: 50px">注册账号</el-button>
              </div>
            </transition>
          </el-tab-pane>
          <!--<el-tab-pane label="微信扫码登录" name="message">
            <transition name="fade">
              <wxLogin @loginSuccess="loginSuccess" ref="phoneSms" v-show="activeName== 'message'"></wxLogin>
            </transition>
          </el-tab-pane>-->
        </el-tabs>

      </div>
    </div>

    <loginBg></loginBg>
  </div>
</template>

<script>
  import api from '@/utils/api'
  import {getToken} from '@/utils/auth'
  import wxLogin from '@/components/login/wxLogin'
  import loginPassWord from '@/components/login/loginPassWord'
  import loginBg from '@/components/loginBg'
  import {commonMixin} from '@/utils/mixin'
  export default {
    mixins: [commonMixin],
    components: {
      wxLogin,
      loginPassWord,
      loginBg
    },
    data () {
      return {
        dataForm: {
          userName: '',
          password: '',
        },
        appList: [],
        showPic: 1,
        activeName: 'password',
        isDialogShow: false,
        redirect: '',
        loading: false
      }
    },
    mounted () {

    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
          if (this.redirect === '/login') {
            this.redirect = '/home'
          }
        },
        immediate: true
      }
    },
    methods: {
      passwordLogin (params) {
        api.staffLogin(params).then(res => {
          this.$message.success('登录成功')
          this.$refs.loginPassWord.loading = false
          api.access_token = getToken()
          this.$router.replace({
            path: this.redirect || '/home'
          })
        }).catch(() => {
          this.$refs.loginPassWord.loading = false
        })
      },
      loginSuccess () {
        this.$message.success('登录成功')
        this.$router.push({
          path: this.redirect || '/home'
        })
      }

    }
  }
</script>

<style lang="scss">
  body, html{
    height: 100%;
  }
  .login-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(top, rgb(218, 235, 232) 0%, #66b7ff 120%);
    .title {
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      //margin-top: 80px;
    }
    canvas {
      position: absolute;
    }
  }
  .login-body__top {
    display: block;
    background-color: #fff;
    height: 120px;
  }
  .main {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    background: #f2f2f2;
    padding: 0 0 70px 0;
  }
  .main__top--logo {
    display: block;
    float: left;
    margin: 30px 0;
    overflow: hidden;
  }
  .main__top--contact {
    display: block;
    height: 120px;
    float: right;
    font-size: 20px;
    text-align: right;
    line-height: 120px;
  }
  .main-login {
    //background: url(~@/assets/img/login_bg.jpg);
    position: absolute;
    right: 10%;
    top: 45%;
    transform: translateY(-50%);
    opacity: 0.73;
    z-index: 88;
  }
  .main__bottom {
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
  }
  .main__bottom--left {
    float: left;
    width: 500px;
    height: 580px;
    position: relative;
    margin-top: 80px;
  }
  .change-box {
    color: #fff;
    text-align: center;
    position: relative;
    width: 500px;
    height: 580px;
  }
  .change-box>img {
    width: 500px;
    height: 500px;
  }
  .change-box>h3 {
    position: absolute;
    font-size: 30px;
    color: #fff;
    letter-spacing: 4px;
  }

  .fade-enter-active, .fade-leave-active{
    transition: opacity 1s;   //类名：隐藏到显示过程所需要的时间
  }
  .fade-enter, .fade-leave-to {      // 类名:初始化状态
    opacity: 0;
  }

  .main__bottom--right {
    background-color: #fff;
    border-radius: 20px;
    float: right;
    margin-top: 100px;
    width: 400px;
    height: 500px;
    position: absolute;
    right: 50px;
  }
  .display-box {
    padding-top: 10px;
    margin: 30px auto;
    width: 440px;
    height: 380px;
    background: rgba(255,255,255, 1);
    border-radius: 9px;
  }
  .companyItem {
    font-size: 21px;
    font-weight: bold;
    padding: 15px;
    border: 1px solid #409EFF;
    border-radius: 5px;
    text-align: center;
    color: #084e96;
    cursor: pointer;
    margin-bottom: 21px;
  }
  .title-tabs .el-tabs__nav-scroll{
    display: flex;
    justify-content: center;
  }
</style>
